﻿
@{
    Layout = "";
}
<style>
    .my-drop-zone {
        border: dotted 3px lightgray;
    }

    .nv-file-over {
        border: dotted 3px red;
    }
    /* Default class applied to drop zones on over */
    .another-file-over-class {
        border: dotted 3px green;
    }

    html, body {
        height: 100%;
    }

    canvas {
        background-color: #f3f3f3;
        -webkit-box-shadow: 3px 3px 3px 0 #e3e3e3;
        -moz-box-shadow: 3px 3px 3px 0 #e3e3e3;
        box-shadow: 3px 3px 3px 0 #e3e3e3;
        border: 1px solid #c3c3c3;
        height: 100px;
        margin: 6px 0 0 6px;
    }

    .ngdialog.ngdialog-theme-plain .ngdialog-content {
        width: 55% !important;
    }

    .form-horizontal .form-group {
        margin-left: 0;
        margin-right: 0;
    }

    .note-image-input {
        margin-bottom: 15px;
    }
</style>
<link href="~/Content/plugins/umeditor/themes/default/css/umeditor.css" rel="stylesheet" />
<script src="~/Content/plugins/umeditor/umeditor.config.js"></script>
<script src="~/Content/plugins/umeditor/umeditor.min.js"></script>
<script src="~/Content/plugins/umeditor/lang/zh-cn/zh-cn.js"></script>
<div ng-controller="SpecialTopicEditController">
    <div class="container-fluid" ng-show="!selectProduct">
        <div class="row">
            <div class="col-md-12">
                <form name="formValidate" ng-submit="submitForm()" novalidate="" class="form-validate form-horizontal">
                    <!-- START panel-->
                    <div class="panel panel-default" ng-class="{ 'whirl standard': isLoading }">
                        <div class="panel-body">
                            <fieldset class="b0">
                                <legend>{{WordTopic.Id == 0 || WordTopic.Id == null ? '添加专题' : '修改专题'}}</legend>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">专题名称</label>
                                    <div class="col-sm-4">
                                        <input type="text" name="name" required="" ng-model="WordTopic.Name" class="form-control" maxlength="20" />
                                        <span ng-show="validateInput('name', 'required')" class="text-danger">请输入专题名称</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">专题海报</label>
                                    <div class="col-sm-3">
                                        <div class="imgcrop-preview" uploader="uploader">
                                            <img ng-src="{{myCroppedImage}}" style="max-width: 100%; max-height: 100%" onerror="javascript: this.src =  '/Content/img/default.png';" />
                                            <input id="fileInput" type="file" style="display: none;" nv-file-select="" uploader="uploader" />
                                        </div>
                                        <div>
                                            <div style="" class="progress progress-xs" ng-show="uploading">
                                                <div role="progressbar" ng-style="{ 'width': uploader.progress + '%' }" class="progress-bar"></div>
                                            </div>
                                        </div>
                                        <span ng-show="IsCheckedPic" class="text-danger">请选择图片</span>
                                    </div>
                                    <div class="col-sm-2">
                                        <button type="button" class="mb-sm btn btn-info" ng-click="selectImage()">
                                            图片选择
                                        </button>
                                        <span class="text-danger">建议上传1：1的海报图</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">专题描述</label>
                                    <div class="col-sm-4">
                                        <input type="text" required="" ng-model="WordTopic.TopicDescription" class="form-control" name="topicDescription" maxlength="50" />
                                        <span ng-show="validateInput('topicDescription', 'required')" class="text-danger">请输入专题描述</span>
                                    </div>
                                    <div class="col-sm-4">
                                        <h4 class="text-danger">*</h4>
                                    </div>
                                </div>
                            </fieldset>
                            <fieldset>
                                <div class="form-group">
                                    <label class="col-sm-2 control-label">排序</label>
                                    <div class="col-sm-1">
                                        <input class="form-control" maxlength="8" ng-model="WordTopic.Sort" type="number">
                                    </div>
                                    <div class="col-sm-6">
                                        <div class="text-danger form-control-static">数字越大显示在最前面，不填默认排序0，排序相同按照时间倒序</div>
                                    </div>
                                </div>
                            </fieldset>
                            @*<fieldset>
                                    <div class="form-group">
                                        <label class="col-sm-2 control-label">产品信息</label>
                                        <div class="col-sm-8">
                                            <div class="table-responsive">
                                                <table ng-table="relationProductsTableParams" class="table table-striped table-bproducted table-hover">
                                                    <colgroup>
                                                        <col style="width: 10%" />
                                                        <col style="width: 15%" />
                                                        <col style="width: 15%" />
                                                        <col style="width: 15%" />
                                                        <col style="width: 10%" />
                                                        <col style="width: 15%" />
                                                        <col style="width: 10%" />
                                                    </colgroup>
                                                    <thead>
                                                        <tr>
                                                        <tr>
                                                            <th class="text-center" colspan="2">产品名称</th>
                                                            <th class="text-center">市场价</th>
                                                            <th class="text-center">销售价</th>
                                                            <th class="text-center">可销库存</th>
                                                            <th class="text-center"></th>
                                                        </tr>
                                                    </thead>
                                                    <tr ng-repeat="topicProduct in $data">
                                                        <td class="text-left" style="vertical-align: middle">
                                                            <img ng-src="{{ImgHostUrl+ topicProduct.ImgUrl}}" style="max-width: 60%; max-height: 60%" onerror="javascript: this.src =  '/Content/img/default.png';" />
                                                        </td>
                                                        <td class="text-left">{{topicProduct.Name}}</td>
                                                        <td class="text-center">{{topicProduct.MarketPrice.toFixed(2)}}</td>
                                                        <td class="text-center">{{topicProduct.Price.toFixed(2)}}</td>
                                                        <td class="text-center">{{topicProduct.TotalStock}}</td>
                                                        <td class="text-center">
                                                            <button type="button" class="btn btn-warning" ng-click="delectThisData(topicProduct.Sku);">删除</button>
                                                        </td>
                                                    </tr>
                                                </table>
                                                <br />
                                                <div class="text-right">
                                                    <button type="button" class="btn btn-info" ng-click="productSelect(WordTopic.TopicProductList)">选择产品信息</button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </fieldset>*@
                            <!--详情-->
                            <div class="panel panel-default" ng-class="{ 'whirl standard': isLoading}">
                                <div class="panel-body">
                                    <fieldset class="b0">
                                        <legend>专题内容</legend>
                                    </fieldset>
                                    <fieldset>
                                        <div class="col-sm-1"></div>
                                        <div class="col-sm-10">
                                            @*<summernote height="400" ng-model="WordTopic.ActivityContent" on-image-upload="summernoteImgUpload(files)"></summernote>
                                            <ng-quill-editor ng-model="WordTopic.ActivityContent" required="true" modules="{toolbar: false}"></ng-quill-editor>*@
                                            <script type="text/plain" id="ActivityContent" name="ActivityContent" style="height: 400px; width:90%" ng-bind="WordTopic.ActivityContent">
                                            </script>
                                        </div>
                                    </fieldset>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer text-right">
                            <button type="button" class="btn btn-warning" ng-click="cancel()">返回列表</button>
                            <button type="submit" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                    <!-- END panel-->
                </form>
            </div>
        </div>
    </div>
</div>
@*<script type="text/ng-template" id="productSelectDialogId">
        <div class="ngdialog-message">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <div class="form-inline ng-pristine ng-valid">
                        <div class="form-group">
                            <input placeholder="关键字" class="form-control" type="text" ng-model="ProductSelectModel.Keywords">
                            <select ng-options="m.Id as m.CategoryName for m in FirstCategoryList" ng-model="ProductSelectModel.FirstCategoryId" ng-change="GetSecondCategory()" class="form-control">
                                <option value="">请选择一级分类</option>
                            </select>
                            <select ng-options="m.Id as m.CategoryName for m in SecondCategoryList" ng-model="ProductSelectModel.SecondCategoryId" class="form-control">
                                <option value="">请选择二级分类</option>
                            </select>
                            <button type="submit" class="btn btn-labeled btn-primary" ng-click="tableParams.$params.page = 1;tableParams.reload()">
                                <span class="btn-label">
                                    <em class="fa fa-search"></em>
                                </span>搜索
                            </button>
                        </div>
                    </div>
                </div>
                <table ng-table="tableParams" class="table table-striped table-bproducted table-hover">
                    <colgroup>
                        <col style="width: 10%" />
                        <col style="width: 15%" />
                        <col style="width: 20%" />
                        <col style="width: 15%" />
                        <col style="width: 15%" />
                        <col style="width: 15%" />
                        <col style="width: 10%" />
                    </colgroup>
                    <thead>
                        <tr>
                            <th class="text-center"></th>
                            <th class="text-center" colspan="2">产品名称</th>
                            <th class="text-center">市场价</th>
                            <th class="text-center">销售价</th>
                            <th class="text-center">可销库存</th>
                        </tr>
                    </thead>
                    <tr ng-repeat="product in $data" ng-init="product = InitProduct(product)">
                        <td>
                            <div class="checkbox c-checkbox">
                                <label>
                                    <input type="checkbox" ng-click="checkProduct($event,product)" ng-checked="isChecked(product.Sku)" />
                                    <span class="fa fa-check"></span>
                                </label>
                            </div>
                        </td>
                        <td>
                            <img ng-src="{{ImgHostUrl+ product.ImgUrl}}" style="max-width: 100px; max-height: 100px;text-align:center;margin-left:5px" onerror="javascript: this.src = '/Content/img/default.png';" />
                        </td>
                        <td class="text-left"> {{product.Name}}</td>
                        <td class="text-center">{{product.MarketPrice.toFixed(2)}}</td>
                        <td class="text-center">{{product.Price.toFixed(2)}}</td>
                        <td class="text-center">{{product.TotalStock}}</td>
                    </tr>
                </table>
                <div class="panel-footer">
                    <div class="form-inline ng-pristine ng-valid">
                        <div class="form-group ">已选择产品：</div>
                        <div class="form-group " ng-repeat="select in selected">
                            <a href="" class="mr-sm label label-primary" ng-click="selected.splice($index, 1);" title="{{select.Name}}">
                                {{select.Name}}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="panel-footer text-right">
                    <button type="button" class="btn btn-primary" ng-click="sureSelect()">
                        关闭
                    </button>
                </div>
            </div>
        </div>
    </script>*@

<script type="text/javascript">



    App.controller('SpecialTopicEditController', ["$scope", "$state", "$http", "$stateParams", "Notify", "FileUploader", 'ngTableParams', 'ngTableDataService', 'ngDialog', '$filter', '$rootScope',
        function ($scope, $state, $http, $stateParams, Notify, FileUploader, ngTableParams, ngTableDataService, ngDialog, $filter, $rootScope) {
            'use strict';
            $scope.submitted = false;
            $scope.isLoading = true;
            $scope.IsCheckedPic = false;
            $scope.WordTopic = { TopicProductList: [] };
            $scope.selected = [];
            $scope.ProductSelectModel = {};
            $scope.validateInput = function (name, type) {
                var input = $scope.formValidate[name];
                return (input.$dirty || $scope.submitted) && input.$error[type];
            };


            var um;
            var tt = function () {
                um == UM.getEditor('ActivityContent');
            }

            setTimeout(tt, 1000);

            //数据初始化
            $http.post("/Activity/SpecialTopicEdit", { Id: $stateParams.Id }).then(function (response) {
                if (response.data.Result && response.data.Result != "") {
                    $scope.WordTopic = response.data.Result;

                    if (response.data.Result.ImgUrl && response.data.Result.ImgUrl != '') {
                        $scope.myCroppedImage = $rootScope.ImgHostUrl + angular.copy(response.data.Result.ImgUrl);
                    }
                } else {
                    $scope.WordTopic = {
                        TopicProductList: []
                    };
                }
                //$scope.CategoryList = response.data.CategoryList;
                //if (!$scope.CategoryList) {
                //    $scope.CategoryList = [];
                //}

                ////获取一级分类
                //$scope.FirstCategoryList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === 0; });

                ////获取二级分类
                //$scope.GetSecondCategory = function () {
                //    $scope.SecondCategoryList = $filter('filter')($scope.CategoryList, function (item) { return item.ParentId === $scope.ProductSelectModel.FirstCategoryId; });
                //}

                //$scope.relationProductsTableParams.reload();
                $scope.isLoading = false;
            });

            // 提交
            $scope.submitForm = function () {
                $scope.isLoading = true;
                $scope.submitted = true;
                if ($scope.formValidate.$valid) {
                    if (!$scope.WordTopic.ImgUrl || $scope.WordTopic.ImgUrl == "") {
                        $scope.IsCheckedPic = true;
                        $scope.isLoading = false;
                        return false;
                    }
                    //if (!$scope.WordTopic.TopicProductList || $scope.WordTopic.TopicProductList.length == 0) {
                    //    Notify.alert('未选择包含产品!', { status: 'warning', timeout: 1000 });
                    //    $scope.isLoading = false;
                    //    return false;
                    //}
                    $scope.WordTopic.ActivityContent = UM.getEditor('ActivityContent').getContent();

                    $http.post("/Activity/SpecialTopicEditSubmit", $scope.WordTopic).then(function (returnData) {
                        if (returnData.data.isSuccess) {
                            Notify.alert('操作成功!', { status: 'success', timeout: 1000 });
                            $state.go("app.specialTopic");
                        } else {
                            Notify.alert(returnData.data.msg, { status: 'warning', timeout: 1000 });
                        }
                        $scope.isLoading = false;
                    });
                } else {
                    $scope.isLoading = false;
                    return false;
                }
            };


            //---------详情
            $scope.summernoteImgUpload = function sendFile(file) {
                var data = new FormData();
                data.append("file", file[0]);
                data.append("type", 0);
                data.append("FullUrl", true);
                $.ajax({
                    data: data,
                    type: "POST",
                    url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=Product',
                    cache: false,
                    contentType: false,
                    processData: false,
                    success: function (response) {
                        $('.summernote').summernote('editor.insertImage', $rootScope.ImgHostUrl + response[0]);
                    }
                });
            }




            //返回列表
            $scope.cancel = function () {
                $state.go("app.specialTopic");
            }

            ////产品选择
            //$scope.productSelect = function () {
            //    $scope.ProductSelectModel = {};
            //    ngDialog.openConfirm({
            //        template: 'productSelectDialogId',
            //        className: 'ngdialog-theme-plain',
            //        scope: $scope
            //    }).then(function (value) {
            //    }, function (reason) {
            //    }
            //    );
            //}

            //-------------图片选择相关
            $scope.selectImage = function () {
                $("#fileInput").click();
            }

            var handleFileSelect = function (evt) {
                var file = $scope.uploadSelectFile = evt.currentTarget.files[0];
                if (!evt.currentTarget.files[0] || ! /image\/\w+/.test(evt.currentTarget.files[0].type)) {
                    Notify.alert('请选择图像文件', { status: 'warning' });
                    return false;
                }
                if (file.size > 1 * 1024 * 1024) {
                    Notify.alert('图片大小不能大于1MB', { status: 'warning', timeout: 3000 });
                    $scope.uploadSelectFile = null;
                    return false;
                }
                var reader = new FileReader();
                reader.onload = function (evt) {
                    $scope.$apply(function ($scope) {
                        $scope.myCroppedImage = evt.target.result;
                    });
                };
                if (file)
                    reader.readAsDataURL(file);
            };

            angular.element(document.querySelector('#fileInput')).on('change', handleFileSelect);
            var uploader = $scope.uploader = new FileUploader({
                url: $rootScope.ImgUploadUrl + '?PlatForm=wsd&Path=SpecialTopic'
            });
            uploader.filters.push({
                name: 'customFilter',
                fn: function (item /*{File|FileLikeObject}*/, options) {
                    return this.queue.length < 10;
                }
            });

            // CALLBACKS

            uploader.onWhenAddingFileFailed = function (item /*{File|FileLikeObject}*/, filter, options) {
                //  console.info('onWhenAddingFileFailed', item, filter, options);
            };
            uploader.onAfterAddingFile = function (fileItem) {
                if ($scope.uploadSelectFile && /image\/\w+/.test($scope.uploadSelectFile.type)) {
                    $scope.uploading = true;
                    fileItem.upload();
                }
                //    console.info('onAfterAddingFile', fileItem);
            };
            uploader.onAfterAddingAll = function (addedFileItems) {
                //   console.info('onAfterAddingAll', addedFileItems);
            };
            uploader.onBeforeUploadItem = function (item) {
                // console.info('onBeforeUploadItem', item);
            };
            uploader.onProgressItem = function (fileItem, progress) {
                // console.info('onProgressItem', fileItem, progress);
            };
            uploader.onProgressAll = function (progress) {
                //  console.info('onProgressAll', progress);
            };
            uploader.onSuccessItem = function (fileItem, response, status, headers) {

                $scope.WordTopic.ImgUrl = response[0];

                $("#fileInput").val("");
                //  console.info('onSuccessItem', fileItem, response, status, headers);
            };
            uploader.onErrorItem = function (fileItem, response, status, headers) {
                //  console.info('onErrorItem', fileItem, response, status, headers);
            };
            uploader.onCancelItem = function (fileItem, response, status, headers) {
                // console.info('onCancelItem', fileItem, response, status, headers);
            };
            uploader.onCompleteItem = function (fileItem, response, status, headers) {
                //  console.info('onCompleteItem', fileItem, response, status, headers);
            };
            uploader.onCompleteAll = function () {
                $scope.uploading = false;
            };


            //-----------产品选择相关
            //$scope.tableParams = new ngTableParams({
            //    page: 1,
            //    count: 10,
            //    sorting: {
            //    }
            //}, {
            //    getData: function ($defer, params) {
            //        $scope.isLoadingProduct = true;
            //        var requestParams = {
            //            Skip: (params.page() - 1) * params.count(),
            //            Take: params.count(),
            //            Keywords: $scope.ProductSelectModel.Keywords,
            //            FirstCategoryIdParm: $scope.ProductSelectModel.FirstCategoryId,
            //            SecondCategoryIdParm: $scope.ProductSelectModel.SecondCategoryId
            //        };
            //        $http.post('/Activity/ProductSelect', ngTableDataService.getServerSideParams(params.orderBy().toString(), params, requestParams))
            //            .success(function (data, status) {
            //                params.total(data.Total);
            //                $defer.resolve(data.Results);

            //                $scope.isLoadingProduct = false;
            //            });
            //    }
            //});
            //$scope.InitProduct = function (product) {
            //    angular.forEach($scope.selected, function (value, index) {
            //        if (product.Sku == value.Sku) {
            //            product = value;
            //        }
            //    });
            //    return product;
            //}
            ////判断产品是否已选择
            //$scope.isChecked = function (sku) {
            //    var result = false;
            //    angular.forEach($scope.selected, function (value, key) {
            //        if (sku == value.Sku) {
            //            result = true;
            //            return false;
            //        }
            //    });
            //    return result;
            //}

            ////确定已选择
            //$scope.sureSelect = function () {
            //    $scope.WordTopic.TopicProductList = angular.copy($scope.selected);
            //    $scope.relationProductsTableParams.reload();
            //    ngDialog.closeAll();
            //}



            ////产品勾选
            //$scope.checkProduct = function ($event, product) {
            //    if (!$scope.selected) {
            //        $scope.selected = [];
            //    }
            //    if ($event.target.checked) {
            //        $scope.selected.push(product);

            //    } else {
            //        $scope.selected.splice($scope.selected.indexOf(product), 1);
            //    }
            //}
            ////产品选择点击
            //$scope.productSelect = function (topicProducts) {
            //    $scope.selected = angular.copy(topicProducts);


            //    $scope.tableParams.$params.page = 1;
            //    $scope.tableParams.reload();
            //    ngDialog.openConfirm({
            //        template: 'productSelectDialogId',
            //        className: 'ngdialog-theme-plain',
            //        scope: $scope
            //    }).then(function (value) {
            //    }, function (reason) {
            //    }
            //     );
            //}

            ////------------------非全场产品选择分页显示
            //////关闭产品选择弹框加载已选产品数据
            ////删除已经选择的产品
            //$scope.delectThisData = function (sku) {
            //    var tempData = [];
            //    $scope.WordTopic.TopicProductList.forEach(function (item) {
            //        if (item.Sku != sku) {
            //            tempData.push(item);
            //        }
            //    });
            //    $scope.WordTopic.TopicProductList = tempData;
            //    $scope.relationProductsTableParams.reload();
            //}


            ////已选择产品分页显示
            //$scope.relationProductsTableParams = new ngTableParams({
            //    page: 1,
            //    count: 5,
            //    sorting: {
            //        Id: 'desc'     // 初始化排序
            //    }
            //}, {
            //    getData: function ($defer, params) {
            //        $scope.isLoadingProduct = true;
            //        var requestParams = {
            //            Skip: (params.page() - 1) * params.count(),
            //            Take: params.count()
            //        };
            //        $scope.getChangePicNum = requestParams.Skip;
            //        params.total($scope.WordTopic.TopicProductList.length);
            //        var tempActivityInfoList = [];
            //        var starNum = 0;
            //        $scope.WordTopic.TopicProductList.forEach(function (item) {

            //            var dataNum = starNum - requestParams.Skip;
            //            if (dataNum >= 0 && dataNum < requestParams.Take) {
            //                tempActivityInfoList.push(item);
            //            }
            //            starNum = starNum + 1;
            //        });
            //        $defer.resolve(tempActivityInfoList);

            //        $scope.isLoading = false;
            //    }
            //});


        }]);
</script>